<template>
  <div class="bank-card-box">
    <div class="item" @click="handleSelectCard">
      <div class="card-head__logo">
        <img src="@icon/logo-g.png" alt="" />
      </div>
      <span class="span-text">{{ cardNum | formatCard }}</span>
      <div class="card-right__logo">
        <img src="@icon/arrow-b.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { Random } from "mockjs";

export default {
  name: "dropdownTop",
  props: {
    cardNum: {
      type: String,
      default: Random.string("number", 16)
    },
    bankCardList: {
      type: Array || Object,
      default() {
        return [
          { cardNumber: "6688****6088" },
          { cardNumber: "6688****6088" },
          { cardNumber: "6688****6088" },
          { cardNumber: "6688****6088" }
        ];
      }
    }
  },
  methods: {
    handleSelectCard() {
      const column1 = [
        { text: "6688****6088", value: "1" },
        { text: "6688****6018", value: "2" },
        { text: "6688****4088", value: "3" }
      ];
      if (!this.picker) {
        this.picker = this.$createPicker({
          data: [column1],
          onSelect: () => {
            console.log(1);
          },
          onCancel: () => {
            console.log("取消");
          }
        });
      }
      this.picker.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
.dropdown-menu
  top 0
  right 0
  margin-right 0
  width 100%
  border-radius 0

.bank-card-box
  position relative
  background #fff
  font-size 32px

  .item
    display flex
    align-items center
    padding 0 27px 0 33px
    height 90px
    color #333333

    .span-text
      padding 0 16px
      flex 1

      &.active
        color #07B7A0

.card-right__logo
  width 48px
  height 48px
  display flex
  justify-content center
  margin-left 16px

  img
    width 100%
    height 100%

  .img2
    width 22px
    height 16px
</style>
